import React, { Component } from 'react';
import autoBind from 'react-autobind';
import { Link, browserHistory } from 'dva/router';
import { Toast, Button, Tabs  } from 'antd-mobile';
import CopyToClipboard from 'react-copy-to-clipboard';

import { getUserId } from '../../../utils/utils';

// style
import styles from './index.css';
import IconfontStyle from '../../../assets/iconfont/iconfont.css';

class MembersBody extends Component {
	constructor(props) {
        super(props)
        autoBind(this)
    }
    componentDidMount() {
    	const { dispatch, meyley } = this.props

    	dispatch({
    		type: 'meyley/fetchMembers',
    		payload: {
    			userId: getUserId()
    		}
    	})
    }
	render() {
		const { meyley } = this.props

	 	return (
	 		<div className={styles['members-body']}>
	 			<Tabs defaultActiveKey="1">
		          <Tabs.TabPane tab="我推荐的会员" key="1">
		            <div className={styles['more-members-body']}>
	 					{
	 						meyley.members && meyley.members.myUserList && meyley.members.myUserList.length ? (
		 						meyley.members.myUserList.map((user, ii) => {
		 							return (<div key={ii} className={styles['members-body-order']}>
				 						<img className={styles['members-body-order-img']} src={user.headpic} />
				 						<span className={styles['members-body-order-des']}>{user.userName}</span>
				 						<span className={styles['members-body-order-text']}>已购买{user.buyTimes}次</span>
				 					</div>)
		 						})
	 							) : (<div className={styles['members-body-order']} style={{color: 'rgb(192,192,192)'}}>暂无推荐会员</div>)
	 					}
	 				</div>
		          </Tabs.TabPane>
		          <Tabs.TabPane tab="我服务的会员" key="2">
		            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '2rem' }}>
		              暂无会员
		            </div>
		          </Tabs.TabPane>
		         </Tabs>
	 		</div>
	  	);
	}
};

MembersBody.propTypes = {
};

export default MembersBody
